<template>
  <TopNav title="修改昵称"/>
  <van-cell-group class="form">
    <van-field v-model="userDesc.nickname" maxlength="15" clearable label="昵称" placeholder="请输入你的昵称" />
  </van-cell-group>
  <div class="tip">最多可输入15个字</div>
  <van-button @click="http_user_update" class="button" color="#d54941" round>保存</van-button>
</template>

<script setup>

import {useDataStore} from "@/stores/dataStore.js";
import {useRoute, useRouter} from 'vue-router'
import TopNav from "@/components/TopNav/Back.vue"
import {onMounted, reactive} from "vue";
import userAxios from "@/api/user.js";

const route = useRoute()
//route.params.name;
const router = useRouter()
const dataStore = useDataStore()
//用户详情
const userDesc = reactive({
  userId: '',
  userImg: '',
  nickname: '',
  username: '',
  password: '',
  phone: '',
  email: '',
  userSex: '',
  signature: '',
  userIntroduce: '',
  userStatus: '',
  fullName: '',
  birthDate: '',
  addressNow: '',
})
onMounted(() => {
  http_user_findById()
})
/**
 * 根据id查询用户
 *  */
const http_user_findById = () => {
  userAxios.user_findById({
    userId: dataStore.userId
  }).then(res => {
    if (res.data.code == 200) {
      userDesc.userId = res.data.data.userId;
      userDesc.userImg = res.data.data.userImg;
      userDesc.nickname = res.data.data.nickname;
      userDesc.username = res.data.data.username;
      userDesc.password = res.data.data.password;
      userDesc.phone = res.data.data.phone;
      userDesc.email = res.data.data.email;
      userDesc.userSex = res.data.data.userSex;
      userDesc.signature = res.data.data.signature;
      userDesc.userIntroduce = res.data.data.userIntroduce;
      userDesc.userStatus = res.data.data.userStatus;
      userDesc.fullName = res.data.data.fullName;
      userDesc.birthDate = res.data.data.birthDate;
      userDesc.addressNow = res.data.data.addressNow;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })
}
/**
 * 修改用户信息
 */
const http_user_update = () => {
  userAxios.user_update({
    userId: userDesc.userId,
    userImg: userDesc.userImg,
    nickname: userDesc.nickname,
    username: userDesc.username,
    password: userDesc.password,
    phone: userDesc.phone,
    email: userDesc.email,
    userSex: userDesc.userSex,
    signature: userDesc.signature,
    userIntroduce: userDesc.userIntroduce,
    userStatus: userDesc.userStatus,
    fullName: userDesc.fullName,
    birthDate: userDesc.birthDate,
    addressNow: userDesc.addressNow,
  }).then(res => {
    if (res.data.code == 200) {
      http_user_findById()
      ElMessage.success('修改成功')
    } else {
      ElMessage.error(res.data.message)
    }
  })
}

</script>

<style scoped lang="scss">
.form{
  margin-top: 10px;
}
.tip{
  font-size: 12px;
  margin: 5px;
  opacity: .7;
}
.button{
  position: fixed;
  bottom: 10px;
  margin-left: 5%;
  width: 90%;
}
</style>
